import 'dart:io';

import 'package:flutter/material.dart';
import 'package:macnov/common/receipt_image.dart';
import 'package:macnov/models/transaction.dart';
import 'package:macnov/utils/Api.dart';
import 'package:macnov/utils/colorUtil.dart';

import 'package:image_picker/image_picker.dart';

class TransactionDetail extends StatefulWidget {
  @override
  _TransactionDetailState createState() => _TransactionDetailState();
}

class _TransactionDetailState extends State<TransactionDetail> {
  File _image;

  @override
  Widget build(BuildContext context) {
    TransactionModel txn = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        brightness: Brightness.light,
        iconTheme: IconThemeData(color: Colors.black),
        elevation: 0.5,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            _buildHeader(txn),
            _buildPhysical(txn),
            _buildRequied(txn),
            _buildOptinal(txn),
            _buildReceipt(txn),
          ],
          crossAxisAlignment: CrossAxisAlignment.start,
        ),
      ),
    );
  }

  _buildHeader(TransactionModel txn) {
    return Container(
      height: 220,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(right: 5),
                child: Icon(Icons.fastfood),
              ),
              Text(
                txn.category,
                style: TextStyle(
                    decoration: TextDecoration.none,
                    fontSize: 16,
                    fontWeight: FontWeight.normal,
                    color: ColorsUtil.hexColor(0x282828)),
              )
            ],
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
          ),
          Padding(
            padding: EdgeInsets.only(top: 10, bottom: 10),
            child: Text(
              r'$' + '${txn.amount}',
              style: TextStyle(
                  decoration: TextDecoration.none,
                  fontSize: 40,
                  fontWeight: FontWeight.bold,
                  color: ColorsUtil.hexColor(0x282828)),
            ),
          ),
          Text(
            txn.date,
            style: TextStyle(
                decoration: TextDecoration.none,
                fontSize: 14,
                fontWeight: FontWeight.bold,
                color: ColorsUtil.hexColor(0x999999)),
          )
        ],
      ),
    );
  }

  _buildPhysical(TransactionModel txn) {
    return Container(
      color: Colors.white,
      child: ListTile(
        title: new Text('PHYSICAL CARD INFO',
            style: new TextStyle(
                fontWeight: FontWeight.w500, color: Colors.black45)),
        trailing: Text(
          '····  ${txn.card}',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
      ),
    );
  }

  _buildRequied(TransactionModel txn) {
    return Container(
      margin: EdgeInsets.only(top: 20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(left: 15, bottom: 10),
            child: Text(
              'REQUIRED (2) *',
              textAlign: TextAlign.left,
            ),
          ),
          Container(
            color: Colors.white,
            padding: EdgeInsets.zero,
            child: new ListTile(
              title: new Text('BUDGET',
                  style: new TextStyle(
                      fontWeight: FontWeight.w500, color: Colors.black45)),
              trailing: Text(
                '${txn.budget}',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
          ),
          Container(
            color: Colors.white,
            child: new ListTile(
              title: new Text('CATEGORY',
                  style: new TextStyle(
                      fontWeight: FontWeight.w500, color: Colors.black45)),
              trailing: Text(
                txn.category,
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ],
      ),
    );
  }

  _buildOptinal(TransactionModel txn) {
    return Container(
      margin: EdgeInsets.only(top: 20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(left: 15, bottom: 10),
            child: Text(
              'OPTIONAL (2) *',
              textAlign: TextAlign.left,
            ),
          ),
          Container(
            color: Colors.white,
            child: new ListTile(
              onTap: () => _chooseImage(txn),
              title: new Text('RECEIPT',
                  style: new TextStyle(
                      fontWeight: FontWeight.w500, color: Colors.black45)),
              trailing: Text(
                '+ ADD RECEIPT',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: ColorsUtil.hexColor(0x376BD1)),
              ),
            ),
          ),
          Container(
            color: Colors.white,
            child: new ListTile(
              title: new Text('NOTE',
                  style: new TextStyle(
                      fontWeight: FontWeight.w500, color: Colors.black45)),
              trailing: Text(
                'add note',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: ColorsUtil.hexColor(0x999999)),
              ),
            ),
          ),
        ],
      ),
    );
  }

  _buildReceipt(TransactionModel txn) {
    if (_image != null)
      return Container(
        padding: EdgeInsets.fromLTRB(10, 10, 10, 20),
        child: Image.file(_image),
      );
    return ReceiptImage(
      txnModel: txn,
    );
  }

  Future _chooseImage(TransactionModel txn) async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    if (image == null) return;
    var response = await Api.uploadTxnReceipt(image, txn.txnId);
    if (response['success'] == true) {
      setState(() {
        _image = image;
      });
    }
  }
}
